import React from 'react';
import { DatePicker, Input, Form, Row, Col } from 'antd';
import moment from 'moment';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const Filter = ({ listParams, dispatch }) => {
  const [form] = Form.useForm();
  const { setFieldsValue } = form;
  const handleSearch = () => {
    dispatch({ type: 'deliveryDetails/getList' });
  };

  const onValuesChange = (changedValues, allValues) => {
    const { dates, ...others } = allValues;
    const params = {
      start_dt: dates && dates[0] ? dates[0].format('YYYY-MM-DD') : null,
      end_dt: dates && dates[1] ? dates[1].format('YYYY-MM-DD') : null,
      page: 1,
      ...others,
    };
    if (changedValues?.product_type) {
      dispatch({
        type: 'deliveryDetails/updateStateProps',
        payload: {
          name: 'listParams',
          value: { product_id: '' },
        },
      });
      setFieldsValue({
        product_id: '',
      });
    }
    dispatch({
      type: 'deliveryDetails/updateStateProps',
      payload: {
        name: 'listParams',
        value: { ...params },
      },
    });
    if (
      ['client_name', 'contract_number', 'department_id'].includes(Object.keys(changedValues)[0])
    ) {
      //  input输入项通过回车来触发搜索
    } else {
      // console.log('查询');
      dispatch({ type: 'deliveryDetails/getList' });
    }
  };
  return (
    <Form
      onFinish={handleSearch}
      className="filterListForm"
      form={form}
      initialValues={{
        client_name: listParams?.client_name || '',
      }}
      layout="inline"
      onValuesChange={onValuesChange}
    >
      <Row>
        <Col span={12}>
          <FormItem name="client_name" label="城市" className="four-word-padding">
            <Input placeholder="请输入城市名称" />
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem name="dates" label="日期" className="four-word-padding">
            <RangePicker
              format="YYYY-MM-DD"
              disabledDate={(current) => {
                return current && current.valueOf() > moment().subtract(0, 'days');
              }}
              allowClear={false}
            />
          </FormItem>
        </Col>
      </Row>
    </Form>
  );
};
export default Filter;
